<template>
	<view class="content">
		<view class="footer-box">
			<view class="footer-item" v-for="(item, index) in messages" :key="index" @click="tp_msg(item.typeid)">
				<view class="footer-left">
					<image class="footer-image" :src="item.img" mode="aspectFill" />
				</view>
				<view class="mes_list">
					<view class="footer-text-container">
						<view class="footer-title">{{item.tit}}</view>
						<view class="footer-date">{{item.messages}}</view>
					</view>
					<view class="footer-right">{{item.time}}</view>
				</view>
				<!-- 未读消息红点提示 -->
				<view v-if="item.unreadCount > 0" class="red-dot"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		nextTick,
		watch
	} from 'vue';

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getMesslist
	} from "@/api/xiaoquan.js";
	// import useStorage from '@/utils/storage.js'; // 假设存在存储工具

	// 消息分类数据
	const messages = ref([{
			id: 1,
			img: "/static/image/kefu.png",
			tit: "我的客服",
			typeid: 1,
			unreadCount: 0 // 未读消息计数
		},
		{
			id: 2,
			img: "/static/image/xitong.png",
			tit: "系统通知",
			typeid: 2,
			unreadCount: 0
		},
		{
			id: 3,
			img: "/static/image/huodong.png",
			tit: "活动通知",
			typeid: 3,
			unreadCount: 0
		},
	]);

	// 获取消息列表
	const getList = async () => {
		// const token = useStorage.get('token');
		// if (!token) {
		// 	return;
		// }

		try {
			const res = await getMesslist();
			console.log('消息列表数据:', res);

			// 处理客服消息
			if (res.data[3]) {
				messages.value[0].messages = res.data[3].title;
				messages.value[0].time = res.data[3].update_time_text;
				messages.value[0].unreadCount = res.data[3].unreadCount || 0; // 新增未读计数
			} else {
				messages.value[0].messages = '';
				messages.value[0].time = '';
				messages.value[0].unreadCount = 0;
			}

			// 处理系统消息
			if (res.data[2]) {
				messages.value[1].messages = res.data[2].title;
				messages.value[1].time = res.data[2].update_time_text;
				messages.value[1].unreadCount = res.data[2].unreadCount || 0;
			} else {
				messages.value[1].messages = '';
				messages.value[1].time = '';
				messages.value[1].unreadCount = 0;
			}

			// 处理活动消息
			if (res.data[1]) {
				messages.value[2].messages = res.data[1].title;
				messages.value[2].time = res.data[1].update_time_text;
				messages.value[2].unreadCount = res.data[1].unreadCount || 0;
			} else {
				messages.value[2].messages = '';
				messages.value[2].time = '';
				messages.value[2].unreadCount = 0;
			}

		} catch (error) {
			console.error('获取消息列表失败:', error);
			uni.showToast({
				title: '获取消息失败',
				icon: 'none'
			});
		}
	};

	// 跳转到消息详情页
	const tp_msg = (typeid) => {
		console.log("跳转类型ID:", typeid);
		uni.navigateTo({
			url: `/package/pages/msg_detail/msg_detail?typeid=${typeid}`
		});
	};
	const token = ref();

	// 页面显示时获取消息
	onShow(() => {
		// 判断是否登录，是否选择学习
		token.value = uni.getStorageSync("login_data")
		console.log(token.value, 234)
		if (!token.value) {
			// 显示提示文字
			wx.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 1000 // 提示停留2秒
			});

			// 延迟2秒后跳转到登录页
			setTimeout(() => {
				wx.switchTab({
					url: '/pages/mine/mine'
				});
			}, 1000);
		}
		// getList();
	});
</script>

<style scoped>
	.content {
		padding: 30rpx;
		background-image: linear-gradient(to bottom, #dceaff, #ffffff);
	}

	.mes_list {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #dddddd;
		width: 90%;
		padding-bottom: 30rpx;
		margin-top: 10rpx;
	}

	.footer-box {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		height: 100vh;
	}

	.footer-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		position: relative;
	}

	.footer-left {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx
	}

	.footer-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.footer-text-container {
		margin-left: 20rpx;
		position: relative;
	}

	.footer-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.footer-date {
		color: #999999;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.footer-right {
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		font-size: 28rpx;
		color: #999999;
	}

	/* 未读消息红点 */
	.red-dot {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		width: 24rpx;
		height: 24rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		color: #fff;
	}
</style>